<template>
	<view class="container">
		<view class="welcome">
			<text class="title">清华美食地图</text>
			<text class="subtitle">小程序客户端</text>
			<text class="description">欢迎使用清华大学地图美食评分系统</text>

			<!-- 用户信息 -->
			<view class="user-info" v-if="userInfo">
				<text class="user-name">👤 {{userInfo.nickname || '用户'}}</text>
			</view>

			<!-- 退出登录按钮 -->
			<button class="logout-button" @tap="handleLogout">
				退出登录
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null
			}
		},
		onLoad() {
			// 获取用户信息
			this.loadUserInfo()
		},
		methods: {
			/**
			 * 加载用户信息
			 */
			loadUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (userInfo) {
						this.userInfo = userInfo
						console.log('用户信息:', userInfo)
					}
				} catch (error) {
					console.error('获取用户信息失败:', error)
				}
			},

			/**
			 * 退出登录
			 */
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除token和用户信息
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')

							// 提示
							uni.showToast({
								title: '已退出登录',
								icon: 'success',
								duration: 1500
							})

							// 跳转到地图页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/map/map'
								})
							}, 1500)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, #f5f5f5 0%, #e8f5e9 100%);
	}

	.welcome {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx;
		text-align: center;
	}

	.title {
		font-size: 72rpx;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 32rpx;
	}

	.subtitle {
		font-size: 36rpx;
		color: #7f8c8d;
		margin-bottom: 48rpx;
	}

	.description {
		font-size: 28rpx;
		color: #95a5a6;
		margin-bottom: 80rpx;
	}

	/* 用户信息 */
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		margin-bottom: 60rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		min-width: 400rpx;
	}

	.user-name {
		font-size: 32rpx;
		color: #2c3e50;
		font-weight: 500;
		margin-bottom: 16rpx;
	}


	/* 退出登录按钮 */
	.logout-button {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 44rpx;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(238, 90, 111, 0.4);
		transition: all 0.3s ease;
	}

	.logout-button:active {
		opacity: 0.8;
		transform: scale(0.98);
	}
</style>
